import { createElement, HTMLAttributes, type FC } from 'react';
import classNames from 'classnames';
import { modalContentDefaultProps } from './defaultProps';
import type { ModalContentOptions } from './type';

export interface ModalContentProps extends ModalContentOptions, HTMLAttributes<HTMLDivElement> {}

const ModalContent: FC<ModalContentProps> = (props) => {
  const { className, ui, image, scrolling, centered, children, forwardedRef, ...modalContentProps } = props;

  return createElement(
    'div',
    {
      ref: forwardedRef,
      className: classNames({ ui, image, scrolling, centered }, 'content', className),
      ...modalContentProps,
    },
    children,
  );
};

ModalContent.displayName = 'ModalContent';
ModalContent.defaultProps = modalContentDefaultProps;

export default ModalContent;
